<template>
  <el-main>
    <!-- 读者信息 -->
    <div id="readerMsg">
       读者信息
    </div>
    <!-- 搜索栏 -->
    <el-form :model="searchParm" :inline="true">
      <el-form-item>
        <el-input v-model="searchParm.username" placeholder="请输入学号" />
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="getByUserName" icon="el-icon-search"> 查询</el-button>
        <el-button size="small" type="info" plain icon="el-icon-refresh" @click="resetBtn"> 重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="returnTime" type="date" placeholder="选择还书时间" />
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="borrowBtn" icon="el-icon-reading"> 借书</el-button>
      </el-form-item>
    </el-form>

    <!-- 用户信息弹窗 -->
    <el-dialog title="读者信息" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
      <el-form :model="showUser" label-width="100px" :disabled="true">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="showUser.learnNum" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级">
              <el-input v-model="showUser.className" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学号">
              <el-input v-model="showUser.username" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话">
              <el-input v-model="showUser.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号">
              <el-input v-model="showUser.idCard" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-radio v-model="showUser.sex" label="0">男</el-radio>
              <el-radio v-model="showUser.sex" label="1">女</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio v-model="showUser.checkStatus" label="0">未审核</el-radio>
              <el-radio v-model="showUser.checkStatus" label="1">已审核</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 图书列表 -->
    <div id="bookMsg">
       图书列表
    </div>
    <elt-transfer ref="eltTransfer" v-model="tableData" :show-query="true" :show-pagination="true"
      :pagination-call-back="paginationCallBack" :left-columns="leftColumns" :title-texts="['待选', '已选']"
      :button-texts="[' 添加', ' 删除']" :query-texts="[' 查询', ' 查询']" :table-row-key="(row) => row.bookId">
      <!-- 可以使用插槽获取到列信息和行信息，从而进行数据的处理 -->
      <template v-slot:leftCondition="{ }">
        <el-form-item label="图书名称">
          <el-input v-model="listParm.bookName" placeholder="图书名称" />
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="listParm.bookAuther" placeholder="作者" />
        </el-form-item>
      </template>
      <template v-slot:rightCondition="{ scope }">
        <el-form-item label="名称">
          <el-input v-model="scope.bookName" placeholder="图书名称" />
        </el-form-item>
      </template>
    </elt-transfer>
  </el-main>
</template>

<script>
import { borrowApi } from '@/api/borrow'
import { getByUserNameApi } from '@/api/reader'
import { getListApi } from '@/api/book'
import eltTransfer from 'elt-transfer/src/eltTransfer'

export default {
  // 注册组件
  components: {
    'elt-transfer': eltTransfer
  },
  data() {
    return {
      returnTime: '',
      bookIds: [],
      // 图书列表分页参数
      listParm: {
        currentPage: '',
        pageSize: '',
        bookName: '',
        bookAuther: ''
      },
      // 选择的图书
      tableData: [],
      leftColumns: [
        { label: '图书名称', id: 'bookName', width: '120px' },
        { label: '图书分类', id: 'categoryName', width: '120px' },
        { label: '书架号', id: 'bookPlaceNum' },
        { label: '作者', id: 'bookAuther' },
        { label: '出版社', id: 'bookProduct' },
        { label: '库存', id: 'bookStore' }
      ],
      // 读者信息搜索框
      searchParm: {
        username: ''
      },
      showUser: {
        readerId: '',
        learnNum: '',
        username: '',
        idCard: '',
        sex: '',
        phone: '',
        className: '',
        checkStatus: ''
      },
      dialogVisible: false
    }
  },
  methods: {
    // 借书按钮
    async borrowBtn() {
      this.bookIds = []
      console.log(this.tableData)
      if (!this.returnTime) {
        this.$message.error('请选择还书时间!')
        return
      }
      if (this.returnTime < new Date().getTime()) {
        this.$message.error('请选择正确还书时间!')
        return
      }
      if (!this.showUser.readerId) {
        this.$message.error('请查询借书人信息是否存在!')
        return
      }
      if (this.tableData.length < 1) {
        this.$message.error('请选择要借的图书!')
        return
      }
      // 找到每个图书的id
      for (let i = 0; i < this.tableData.length; i++) {
        this.bookIds.push(this.tableData[i].bookId)
      }
      // 提交
      const parm = {
        readerId: this.showUser.readerId,
        bookIds: this.bookIds,
        returnTime: this.returnTime
      }
      const res = await borrowApi(parm)
      if (res && res.code == 200) {
        this.$message.success(res.msg)
        setTimeout(function () {
          window.location.reload()
        }, 3000)
      }
    },
    // 重置按钮
    resetBtn() {
      this.searchParm.username = ''
      this.showUser.readerId = ''
      this.showUser.learnNum = ''
      this.showUser.username = ''
      this.showUser.idCard = ''
      this.showUser.sex = ''
      this.showUser.phone = ''
      this.showUser.className = ''
      this.showUser.checkStatus = ''
    },
    // 获取读者信息
    async getByUserName() {
      const res = await getByUserNameApi(this.searchParm)
      if (res && res.code == 200 && res.data) {
        this.showUser = res.data
        this.dialogVisible = true
      } else {
        this.$message.error('未找到读者信息')
      }
    },
    async paginationCallBack(obj) {
      console.log(obj)
      this.listParm.currentPage = obj.pageIndex
      this.listParm.pageSize = obj.pageSize
      // 获取图书数据
      const res = await getListApi(this.listParm)
      console.log(res)
      return new Promise((resolve, reject) => {
        try {
          resolve({ total: res.data.total, data: res.data.records })
        } catch {
          reject()
        }
      })
    },
    clearTransfer() {
      this.$refs.eltTransfer.clear()
    }
  }
}
</script>

<style scoped>
::v-deep .el-card__header {
  padding: 15px 0px 0px 0px;
}

::v-deep .el-card__body {
  padding: 15px 0px 0px 0px;
}


#readerMsg {
  margin: 0px 0px 15px 0px;
  color: #67c23a;
  font-size: 24px;
}

#bookMsg {
  margin: 15px 0px;
  color: #67c23a;
  font-size: 24px;
}
</style>
